<template>
  <div ref="gantt"></div>
</template>

<script>
import {gantt} from 'dhtmlx-gantt';
export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default () {
        return {data: []}
      }
    }
  },
  watch:{
    tasks:{
      deep:true,
      handler(){
        gantt.clearAll() // 先清空，再添加，就不会有缓存
        gantt.parse(this.tasks);  // 数据解析
      }
    }
  },


  mounted: function () {
    gantt.clearAll() // 先清空，再添加，就不会有缓存
    gantt.init(this.$refs.gantt);    // 初始化
    gantt.parse(this.tasks);  // 数据解析

    gantt.config.xml_date = "%Y-%m-%d";
    gantt.i18n.setLocale('cn')  //国际化
    gantt.config.autofit = true // 表格列宽⾃适应
    gantt.config.select_task = false // 任务是否可以点击选中
    gantt.config.readonly = true   //配置甘道图不可编辑
    gantt.config.autosize = true  //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
    gantt.config.show_grid = false //是否显示左侧树表格
    //设置图表区域的日期坐标最大值 var date = new Date(dateString.replace(/-/,"/"))
    //  gantt.config.start_date = new Date("2020-04-08".replace(/-/,"/")) ;
    //gantt.config.end_date = new Date("2020-04-18".replace(/-/,"/")) ; //结束时间需要+1天


    //表格列设置
    gantt.config.columns = [
      { name: 'text', label: '任务名称', tree: true, width: '120' },
      {
        name: 'duration', label: '时长', align: 'center',  template: function(obj) {
          return obj.duration + '天'
        }
      }

      // {name:"start_date", label:"开始时间", align: "center" },
      // {name:"end_date",   label:"结束时间",   align: "center" }
    ]

    // gantt.config.autoscroll = true// ⾃动滚动

    gantt.config.scale_unit = 'day'  // ⼯期计算的基本单位
    gantt.config.step = 1
    gantt.config.date_scale = '%m-%d' // 设置x轴的⽇期格式
    gantt.config.duration_unit = 'day' // ⼯期计算的基本单位


    //任务条显示内容
    gantt.templates.task_text = function(start, end, task) {
      return task.text + ' （进度：' + task.progress*100 + '%）'
    }


    gantt.config.subscales = [   // 在时间线上增加一行显示星期
      {unit:"day",  step:1, date:"星期"+"%D" },
    ]


  }
}
</script>

<style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";

.gantt_task_line{
  background: rgb(179,216,255);
}
.gantt_task_progress{
  background: rgb(63,158,255);
}


</style>
